<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/layui/css/layui.css">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/common.css">
    <script th:src="${iconfontUrl}"></script>
    <script src="https://www.sunyuchao.com/static/js/heart.js"></script>
    <style>
        body{background-color: white;}
        .box{padding: 10px;border: 2px solid rgb(222,222,222);line-height: 30px;border-top: none;
        border-left: none;border-right: none;
            font-size: 18px;
            margin-top: 10px;
            transition:border-bottom 2s;
        }
        .box input{color: #333;}
        .box i{color: gray}
        .box:hover  {
            border-bottom: 2px solid cornflowerblue;
        }

        .box:hover > i {
            color: blueviolet;;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            font-size: 14px;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            font-size: 14px;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            font-size: 14px;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
           font-size: 14px;
        }


        .box1{margin-top: 50px;}

        .other-login{margin: 15px;}
        .other-login li {   width: 25%;float: left;height: 60px; text-align: center;line-height: 60px;}
        .other-login li i{font-size: 50px;transition: opacity 1s}
        .other-login li i:hover{opacity: 0.5;}

        .loginInfo{width: 80%;height: 30px;border: none;}
        #goLogin{width: 100%;margin-top: 20px;}

    </style>
</head>
<body>

<div style="margin:10px  80px;padding: 0 30px;">
    <form>
        <div class="box box1">
            <i style="font-size: 24px;" class="layui-icon layui-icon-username"></i>
            <input type="text" name="email" placeholder="请输入邮箱" class="loginInfo">
        </div>
        <div class="box box2">
            <i style="font-size: 24px;"  class="layui-icon layui-icon-password"></i>
            <input type="password" name="password" placeholder="请输入密码" class="loginInfo">
        </div>
        <div class="layui-btn layui-btn-normal" id="goLogin" >
             登录
        </div>
        <div style="width: 100%;margin-top: 20px;">
            还没有账号？<a style="color: blue;" id="register" href="/login/regist">立即注册</a>
            <span style="float: right;"><a style="color: blue;" href="/login/forgotPassword">忘记密码？</a></span>
        </div>
        <div style="width: 100%;margin-top: 10px;">
            <span>其他登录方式</span>
            <ul class="other-login">
                <li><a href="javascript:;" onclick="window.parent.location.href='/login/qqLogin'"><i style="color: blueviolet;" class="layui-icon layui-icon-login-qq"></i></a></li>
                <li class="undevelop"><a href="javascript:;"><i style="color: yellowgreen;" class="layui-icon layui-icon-login-wechat"></i></a></li>
                <li class="undevelop"><a href="javascript:;"><i style="color: indianred;" class="layui-icon layui-icon-login-weibo"></i></a></li>
                <li class="undevelop"><a href="javascript:;"><svg class="icon" style="font-size: 50px;margin-top: 5px;" aria-hidden="true"><use xlink:href="#layui-extend-github"></use></svg>
                </a></li>

            </ul>
        </div>

    </form>
</div>
<script src="https://www.sunyuchao.com/static/layui/layui.js"></script>
<script>
    layui.use(['layer'],function () {
            var layer=layui.layer,
                $=layui.jquery;

            $(".undevelop").click(function () {
                layer.msg("抱歉，该功能暂未开放！");
            });

        //文本框回车
        $("input[name=password]").keypress(function (e) {
            if (e.which == 13) {
                goToLogin();
            }
        });

            $("#goLogin").click(function () {
                goToLogin();
            });

            function checkInfo() {
                var username=$("input[name=email]").val();
                var password=$("input[name=password]").val();
                var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
                if(username == "" || password ==""){
                    layer.msg("请输入邮箱或密码");
                    return false;
                }else if(!reg.test(password) || password.length < 6){
                    layer.msg("用户名或密码错误");
                    return false;
                }
                return true;
            }

            function goToLogin() {
                if(checkInfo()){
                    $.ajax({
                        url:"/login/check",
                        type:"POST",
                        data:{"email":$("input[name=email]").val(),"password":$("input[name=password]").val()},
                        success:function (e) {
                            if(e.success){
                                window.parent.location.href='/';
                            }else{
                                layer.msg(e.message);
                            }
                        },dataType:"json"
                    });
                }
            }
    });
</script>
</body>
</html>